<template>
<HorizonScroll :target="target">
  <template v-slot:carousel_content>
    <section id="carousel_ShouFa" class="carousel slide">

    <main class="container">
        <a href="#" class="mod_btn">
            <i class="mod_btn_icon">播放全部</i>
        </a>
        <div class="index_hd">
        <div class="index_title">
              <h2 class="icon_txt"> 新歌首发</h2>
            </div>
        </div>
        <div class="tab_index">
              <a href="#">为你推荐</a>
              <a href="#">短视频热歌</a>
              <a href="#">官方歌单</a>
              <a href="#">古风</a>
              <a href="#">情歌</a>
              <a href="#">经典</a>
            </div>
    <div class=" carousel-item active"  id="slide_one">
    <div class="row" v-for="(i,index) in 3" :key="index">
    <div class="col" v-for="(j,index) in 3" :key="index">
    <div class="mod_list__item" >
    <div class="mod_list_item_box">
        <div class="list_cover">
        <a class="mod_link">
            <img class="mod_list__pic" loading="lazy" :src="collection[0]">
            <i class="mod_cover__mask"></i>
            <i class="mod_cover__icon_play"></i>
        </a>
        </div>
            <div class="mod_list__cont">
                <h3 class="mod_list__song">
                    <a href="#">时间探戈</a>
                </h3>
                <p class="mod_list__author">
                <a class="c_tx_thin"  href="#">ICE杨长青</a>
                </p>
            </div>
                <div class="mod_list__time">02:20</div>
    </div>
    </div>
    </div>
    </div>
    </div>

    <div class=" carousel-item "  id="slide_two">
    <div class="row" v-for="(i,index) in 3" :key="index">
    <div class="col" v-for="(j,index) in 3" :key="index">
    <div class="mod_list__item" >
    <div class="mod_list_item_box">
        <div class="list_cover">
        <a class="mod_link">
            <img class="mod_list__pic" loading="lazy" :src="collection[0]">
            <i class="mod_cover__mask"></i>
            <i class="mod_cover__icon_play"></i>
        </a>
        </div>
            <div class="mod_list__cont">
                <h3 class="mod_list__song">
                    <a href="#">时间探戈</a>
                </h3>
                <p class="mod_list__author">
                <a class="c_tx_thin"  href="#">ICE杨长青</a>
                </p>
            </div>
                <div class="mod_list__time">02:20</div>
    </div>
    </div>
    </div>
    </div>
    </div>

     <InDicators :target="target" :nums="3"></InDicators>
    </main>

  </section>
  </template>

</HorizonScroll>
</template>
<script>
    
    import HorizonScroll from '../HorizonScroll.vue';
    import InDicators from '../Indicators.vue';
    import {CreateImgList} from '@/utils/mixin.js'//此处必须使用具名导入，而不能使用默认导入
    const PathFolder = require.context('@/assets/Xinge', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数

    export default{
        name:'ShouFa',
        mixins:[CreateImgList],
        components:{
          HorizonScroll,
          InDicators
        },
        data(){
            return{
                PathFolder,
                Nums:54,
                collection:[],
                target:'#carousel_ShouFa'//作用于左右两个按钮的操作对象
            }
        },
        beforeMount(){
            this.GetImgPath(this.PathFolder,'DianTai',this.Nums);//提供图片数组

        },
        mounted(){
            this.collection = this.ImgList[0].DianTai;
        }
        ,
       
    }
</script>
<style scoped lang="scss">
    @import '@/Style/bootstrap.min.css';
    @import '@/Style/scss/title.scss';
    @import '@/Style/scss/_variables.scss';
  
    #carousel_ShouFa
    {
        overflow: hidden;
        width: 1200px;
    }
  
   .wrap{//不可删除，这是通过horizonscroll组件控制背景色的属性
      background-color: $secondary-color;
    }
    .index_title{
      background-position: $bg-offset-shoufa;
    }
    .col{
        max-width: 379px;
        min-width: 273px;
    }
    .mod_btn{
        position: absolute;
        top: 16%;
        margin-top: -40px;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        font-size: 14px;
        margin-right: 6px;
        padding: 0 23px;
        height: 38px;
        line-height: 38px;
        display: inline-block;
        white-space: nowrap;
        box-sizing: border-box;
        overflow: hidden;
        text-decoration: none;

        &_icon{
          width: 13px;
        height: 16px;
        }
    }

    .carousel-item
    {
        top: 25%;
    }


    // 分割线
      .list_cover{
        float: left;
      }
      .c_tx_thin{
        color: #999;
      }

      .mod_list{
        &__author{
          max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        }

        &__song{
          max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        padding: 21px 0 2px;
        font-weight: 400;
        a{
          text-decoration: none;
        }
        }

        &__cont
        {
          font-size: 14px;
        cursor: pointer;
        }

        &__item{
          margin: 0;
          padding: 0;
        }

        &__pic{
          width: 86px;
          height: 86px;
        }

        &__time{
          position: absolute;
        right: 0;
        bottom: 0;
        line-height: 86px;
        color: #999;
        }
      }
     
   
     
     .mod_list_item_box{
        position: relative;
        height: 86px;
        overflow: hidden;
        border-top: 1px solid #f2f2f2;
        margin: -1px 30px 13px 0;
        padding-top: 12px;
        font-size: 14px;
        cursor: pointer;
     }
   
     .mod_link{
        width: 86px;
        margin-right: 14px;
        position: relative;
        height: 86px;
        overflow: hidden;
     }
</style>